<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container bg">
    <div class="container-content">
      <!-- header 部分 -->
      <header class="header-h">
        <!-- title -->
        <div class="title title-h w-safe">
          <h1 class="f-28 weight-600 pt-50x">The Flower Blog</h1>
        </div>
        <!-- nav -->
        <div class="nav nav-h nav-bg">
          <section class="h-full w-safe  nav-c pos-rel">
            <ul class="h-full items-center">
              <li class="ml-55x mr-64x">Blog</li>
              <li class="mx-64x">About</li>
              <li class="ml-50x mr-64x">Archives</li>
              <!-- 加了flower图片 -->
              <li class="ml-47x mr-64x">Contact</li>
              <li class="ml-57x"> Sybscnbe via RSS</li>
            </ul>
            <img class="wifi" src="./img/wifi.png" alt="">
          </section>
        </div>
      </header>
      <!-- header end -->

      <!-- logo 部分 -->
      <section class="mt-26x">
        <section class="w-safe">
          <div class="logo logo-wh hide pos-rel">
            <img class="img-wh w-full h-full" src="./img/logo.png" alt="">
            <div class="logo__content">
              <span class="h1-c f-28 line-45">Do you love flowers as much as we do?</span>
              <p class="p-c line-23 mt-20x f-13">Lorem ipsum dolor sit amet, consectetur adlpislcing elit
                sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut.</p>
            </div>
          </div>
        </section>
      </section>
      <!-- logo end -->

      <!-- article comment email -->
      <section class="w-safe">
        <div class="content flex">
          <section class="left brc pr-25x bbox">
            <!-- article -->
            <section class="">
              <section class="artist bbc">
                <h1 class="f-29 weight-600 mt-35x mb-30x">This is the title of a blog post</h1>
                <span class="italic italic-c">Posted on June 29th 2009 by <span class="li-bbc">Mads Kiaer</span> -
                  <span class="li-bbc">3 comments</span></span>

                <!-- 正文部分 -->
                <section class="mt-25x flex">
                  <!-- left -->
                  <section class="flex-1">
                    <p class="f-13 line-22 article-left-w word-05">Lorem ipsum dolor sit amet. consectetur adipiscing
                      elit. Proin euismod tellus eu orci imperdiet nec
                      rutrum lacus blandit. Cras enim nibh. sodales
                      ultricies elementum vel. fermentum id tellus. Proin
                      metus odio. ulthcies eu pharetra dictum, laoreet id
                      odio. Curabitur in odio augue. Morbi congue auctor
                      interdum. Phasellus sit amet metus justo. Phasellus
                      vitae tellus orci. at elementum ipsum. In in quam
                      eget diam adipiscing condimentum. Maecenas
                      gravida diam vitae nisi convallis vulputate quis sit
                      amet nibh. Nullam ut velit tortor Curabitur ut elit id
                      nisi volutpat consectetur ac ac lorem. Quisque non
                      elit et elit lacinia lobortis nec a velit. Sed ac nisi
                      sed enim consequat porttitor</p>
                    <div class="img mt-49x mb-28x w-full">
                      <img class="article-img-wh" src="./img/flower.png" alt="">
                    </div>
                    <p class="f-13 line-22 article-left-w word-05">Pellentesque ut sapien arcu. egestas mollis massa
                      Fusee lectus leo. fringilla at aliquet sit amet.</p>
                    <p class="f-13 line-22 article-left-w word-05 pb-30x"> volutpat non erat. Aenean molestie nibh vitae
                      turpis
                      venenatis vel accumsan nunc tincidunt</p>
                  </section>

                  <!-- right -->
                  <section class="flex-1 ml-21x">
                    <p class="f-13 line-22 article-right-w word mb-24x">Suspendisse id purus vel felis auctor mattis
                      non ac
                      erat. Pellentesque sodales venenatis condimentum
                      Aliquam sit amet nibh nisi, ut pulvinar est. Sed
                      ullamcorper nisi vel tortor volutpat eleifend.
                      Vestibulum iaculis ullamcorper diam consectetur
                      sagittis. Quisque vitae mauhs ut elit semper
                      condimentum vahus nec nisi. Nulla tempus porttitor
                      dolor ac eleifend. Proin vitae purus lectus. a
                      hendreht ipsum. Aliquam mattis lacinia hsus in
                      blandit.</p>
                    <p class="f-13 line-22 article-right-w word">Vivamus vitae nulla dolor Suspendisse eu lacinia
                      justo. Vestibulum a felis ante, non aliquam leo.
                      Aliquam eleifend. est viverra semper luctus. metus
                      purus commodo elit. a elementum nisi lectus vel
                      magna. Praesent faucibus leo sit amet arcu
                      vehicula sed facilisis eros aliquet. Etiam sodales
                      enim sit amet mollis vestibulum. ipsum sapien
                      accumsan lectus. eget ultricies arcu velit ut diam
                      Aenean fermentum luctus nulla. eu malesuada urna
                      consequat in. Pellentesque habitant morbi thstique
                      senectus et netus et malesuada fames ac turpis
                      egestas. Pellentesque massa lacus. sodales id
                      facilisis ac. lobortis sed arcu. Donee hendreht
                      fringilla ligula. ac rutrum nulla bibendum id. Cras
                      sapien ligula. tincidunt eget euismod nec. ultricies
                      eu augue. Nulla vitae velit sollicitudin magna mattis
                      eleifend. Nam enim justo. vulputate vitae pretium
                      ac. rutrum at turpis. Aenean id magna neque. Sed
                      rhoncus aliquet viverra</p>
                  </section>
                </section>
              </section>
            </section>

            <!-- article end -->
            <!-- comments -->
            <section class="comments bbc">
              <h1 class="f-19 pt-33x pb-37x">Comments</h1>
              <div class="comments__content mx-22x">
                <!-- 第一条 -->
                <section class="justify-between mb-45x">
                  <div class="comment__content__left">
                    <p class="weight-600 underline">George Washington</p>
                    <p class="f-13 line-28">on June 29th 2009 at 23:35</p>
                  </div>
                  <div class="comment__content__right">
                    <p class="f-13 line-22 w-330 word-08 mt_3 ">Lorem ipsum dolor sit amet. consectetur adipisicing elit.
                      on June 29th 2009 at 23:35 sed do eiusmod tempor
                      magna aliqua. Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut</p>
                  </div>
                </section>
                <!-- 第二条 -->
                <section class="justify-between mb-45x">
                  <div class="comment__content__left">
                    <p class="weight-600 underline">George Washington</p>
                    <p class="f-13 line-28">on June 29th 2009 at 23:35</p>
                  </div>
                  <div class="comment__content__right">
                    <p class="f-13 line-22 w-330 word-08 mt_3 ">Lorem ipsum dolor sit amet. consectetur adipisicing elit.
                      on June 29th 2009 at 23:35 sed do eiusmod tempor
                      magna aliqua. Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut</p>
                  </div>
                </section>
                <!-- 第三条 -->
                <section class="justify-between mb-46x">
                  <div class="comment__content__left">
                    <p class="weight-600 underline">George Washington</p>
                    <p class="f-13 line-28">on June 29th 2009 at 23:35</p>
                  </div>
                  <div class="comment__content__right">
                    <p class="f-13 line-22 w-330 word-08 mt_3 ">Lorem ipsum dolor sit amet. consectetur adipisicing elit.
                      on June 29th 2009 at 23:35 sed do eiusmod tempor
                      magna aliqua. Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut</p>
                  </div>
                </section>
              </div>
            </section>
            <!-- comments end -->

            <!-- email -->
            <section class="email">
              <h1 class="f-20 pt-32x">Post a comment</h1>
              <section class="pr-133x">
                <div class="email__content items-end flex-col">
                  <p class="weight-600 mt-11x mb-22x"><span class="letter_03 in-block pt-1">Name</span><input class="in-block h-20 w-299 bc ml-20x " type="text"></p>
                  <p class="weight-600 mb-22x"><span class="letter_03 in-block">E-mail</span><input class="in-block h-20 w-299 bc ml-20x  " type="text"></p>
                  <p class="weight-600 mb-22x"><span class="letter_03 in-block">Website</span><input class="in-block h-20 w-299 bc ml-20x  " type="text"></p>
                  <p class="weight-600 flex pb-72x pos-rel"><span class="in-block pt-1 letter_02">Comment</span> <textarea class="w-299 h-100 ml-20x bc"
                      cols="30" rows="10"></textarea>
                    <input class="post-comment" type="text" value="Post comment">
                  </p>
                </div>
              </section>
            </section>
            <!-- email end -->
          </section>
          <section class="right right-bg pt-22x pl-20x">
            <div class="categories w-full">
              <section class="pt-22x pl-23x right-items-bg br-10">
                <h1 class="f-19">Categories</h1>
                <div class="f-13 line-23 pl-22x pt-10x pb-20x">
                  <p>Lorem ipsum dolor</p>
                  <p>Sit amet consectetur</p>
                  <p>Adipisicing elit sed</p>
                  <p>Do eiusmod tempor</p>
                  <p>Incididunt ut labore</p>
                </div>
              </section>
            </div>
            <div class="archives w-full mt-11x">
              <section class="pt-22x pl-23x right-items-bg br-10">
                <h1 class="f-19">Archives</h1>
                <div class="f-13 line-23 pl-22x pt-10x pb-20x">
                  <p>December 2008</p>
                  <p>January 2008</p>
                  <p>February 2008</p>
                  <p>March 2008</p>
                  <p>April 2008</p>
                  <p>May 2008</p>
                  <p>June 2008</p>
                </div>
              </section>
            </div>
          </section>
        </div>


      </section>
      <!-- article comment email end -->

      <!-- footer -->
      <footer class="footer-bg footer-h">
        <section class="footer-set flex h-full">
          <div class="footer__one w-321">
            <h1 class="fff pb-12x f-18">About</h1>
            <p class="about-c line-22 f-13 w-302 word-1">Lorem ipsum dolor sit amet. consectetur adipisicing
              elit. sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam.
              quis nostrud exercitation ullamco <span class="ul-c li-bbc">laboris nisi ut
                aliquip</span> ex ea commodo consequat. Duis aute irure
              dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur. Excepteur sint
              occaecat cupidatat non proident. sunt in culpa qui
              officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="footer__two w-320">
            <h1 class="fff pb-12x f-18">Blogroll</h1>
            <ul class="w-308 pl-38x ul-c line-22 f-13 word-1">
              <li class="list-square"><span class="li-bbc">NETTUTS+</span></li>
              <li class="list-square"><span class="li-bbc">FreelanceSwitch</span></li>
              <li class="list-square"><span class="li-bbc">In The Woods</span></li>
              <li class="list-square"><span class="li-bbc">Netsetter</span></li>
              <li class="list-square"><span class="li-bbc">PSDTUTS+</span></li>
            </ul>
          </div>
          <div class="footer__three flex-1 word-1">
            <h1 class="fff pb-12x f-18">Popular</h1>
            <ul class="w-308 pl-38x ul-c line-22 f-13 word">
              <li class="list-square"><span class="li-bbc letter_0">This is the title of a blog post</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Lorem  ipsum  dolor sit amet</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Duis aute irure dolor</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Excepteur sint accaecat cupidattat</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Reprehenderit in voluptate velit</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Reprehenderit in voluptate velit</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Officia deserunt mollit anim id est laborum</span></li>
              <li class="list-square"><span class="li-bbc letter_0">Lorem ipsum dolor sit amet</span></li>
            </ul>
          </div>
        </section>
      </footer>
      <!-- footer end -->
    </div>

  </div>
</body>

</html>